<template>
    <div class="table_box">
        <div class="has_check flexbox flexcenter flexbetween" v-if="hasCheck.length>0">
            <div class="has_ch_left">
                <span class="has_text">已选中{{ hasCheck.length }}项</span>
                <span class="has_btn" @click="fuce">复测</span>
            </div>
            <div class="close_check">
                <img src="../../assets/img/close_check.svg" alt="" @click="closeCheck">
            </div>
        </div>
        <el-table :data="tableData" class="com_table source_table" ref="straRef" height="700px" :row-key="(row)=>{ return row.id}" @sort-change='sortChange' @selection-change="selectStrategy">
            <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:700px">
                <img src="../../assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据</div>
            </div>
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable='selectEnable'>
            </el-table-column>
            <el-table-column prop="material_name" label="素材名称" min-width="200"></el-table-column>
            <el-table-column prop="material_id" label="素材ID" min-width="200"></el-table-column>
            <el-table-column prop="status" label="素材评级/复测状态" min-width="170">
                <template slot-scope="scope">
                    <div class="pf_tag flexbox flexcenter gray" v-if="scope.row.status==3">
                        <img src="../../assets/img/pf_tag8.svg" alt="">
                        待复测
                    </div>
                    <div class="pf_tag flexbox flexcenter gray" v-if="scope.row.status==5">
                        <img src="../../assets/img/pf_tag8.svg" alt="">
                        复测中
                    </div>
                    <div class="pf_tag flexbox flexcenter blue" v-if="scope.row.status==2">
                        <img src="../../assets/img/pf_tag4.svg" alt="">
                        A 级素材
                    </div>
                    <div class="pf_tag flexbox flexcenter zong" v-if="scope.row.status==1">
                        <img src="../../assets/img/pf_tag3.svg" alt="">
                        S 级素材
                    </div>
                    <template v-else-if="scope.row.status==0">
                        <div class="pf_tag flexbox flexcenter green" v-if="scope.row.plan_count>0">
                            <img src="../../assets/img/pf_tag10.svg" alt="">
                            测试中
                        </div>
                        <div class="pf_tag flexbox flexcenter gray" v-else>
                            <img src="../../assets/img/pf_tag8.svg" alt="">
                            待测试
                        </div>
                    </template>
                    <div class="pf_tag flexbox flexcenter yellow" v-else-if="scope.row.status==-1">
                        <img src="../../assets/img/pf_tag2.svg" alt="">
                        淘汰素材
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="评级时执勤优化师" min-width="170">
                <template slot-scope="scope">
                    {{scope.row.nickname?scope.row.nickname:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="protect_time" label="潜力保护" width="250">
                <template slot-scope="scope">
                    <template v-if="getProtectTime(scope.row.protect_time) == 0">
                        <div class="flexbox flexcenter">
                            <div class="protct_circle protct_gray"></div>
                            <div class="protct_text">未开始</div>
                        </div>
                    </template>
                    <template v-else-if="getProtectTime(scope.row.protect_time) == 1">
                        <div class="flexbox flexcenter">
                            <div class="protct_circle protct_red"></div>
                            <div class="protct_text">已结束</div>
                        </div>
                    </template>
                    <template v-else-if="getProtectTime(scope.row.protect_time) == 2">
                        <div class="flexbox flexcenter">
                            <div class="protct_circle protct_green"></div>
                            <div class="protct_text">保护中</div>
                            <div class="protct_text">{{scope.row.protect_time}}</div>
                        </div>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="plan_count" label="关联中计划数" width="125">
                <!-- <template slot-scope="scope">
                    {{scope.row.plan_count?scope.row.plan_count:"--"}}
                </template> -->
            </el-table-column>
            <el-table-column prop="first_time" label="首次建计划时间" min-width="180">
                <template slot-scope="scope">
                    {{scope.row.first_time?scope.row.first_time:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="stat_cost" label="消耗" min-width="125" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.stat_cost?scope.row.stat_cost:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="convert_cost" label="转化成本" min-width="125" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.convert_cost?scope.row.convert_cost:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="roi" label="ROI" min-width="100" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.roi?scope.row.roi:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="roi" label="操作" width="80" fixed="right">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="viewLog(scope.row)" style="margin-left:8px">日志</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import "@/assets/css/video.css";
export default {
    props: ["tableData", "queryInfo"],
    name: "",
    data() {
        return {
            hasCheck:[],
        };
    },
    created() {},
    methods: {
        // 表格排序
        sortChange(column) {
            this.queryInfo.ordertype = "";
            this.queryInfo.orderfield = "";
            if (!column.order) {
                this.queryInfo.page = 1;
                this.$emit("getDataList");
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.ordertype = order;
            this.queryInfo.orderfield = column.prop;
            this.queryInfo.page = 1;
            this.$emit("getDataList");
        },

        selectStrategy(v) {
            this.hasCheck = v;
        },

        selectEnable(row, rowIndex) {
            if (row.status == 3) {
                return true;
            } else {
                return false;
            }
        },

        closeCheck(){
            this.$refs.straRef.clearSelection();
        },

        fuce() {
            this.$confirm(`素材复测`, `是否复测？`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let id = this.hasCheck.map(item=>{return item.id})
                    const { data: res } = await this.$http.post(
                        "videotest/Probject/materialRetest",
                        {
                            ids: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.$emit("getDataList")
                        this.closeCheck()
                    }
                })
                .catch(() => {});
        },

        getProtectTime(time) {
            let status = null;
            if (!time) {
                status = 0; //未开始
            } else {
                let nowDate = new Date();
                let isTime = new Date(time);
                if (nowDate > isTime) {
                    status = 1; //已结束
                } else {
                    status = 2; //保护中
                }
            }
            return status;
        },

        viewLog(row) {
            this.$emit("viewLog", row);
        },
    },
    components: {},
};
</script>


<style scoped>
.table_box {
    padding: 0 20px;
}
.has_check{
    margin-bottom: 20px;
}
</style>
